<template>
  <div id="box" v-show="chooseTimeStatus2">
    <div class="popup">
      <div style="width:100%;" class="select-time-box">
        <div class="theHead">
          <span class="theTitle">时间选择</span>
          <x-icon @click="closeX" type="ios-close-empty" size="30"></x-icon>
        </div>
        <div class="theDateCon">
          <div class="dateSty" @click="getDate()">
            {{ startDateShow }}
          </div>
          至
          <div class="dateSty" @click="getDate(2)">
            {{ endDateShow }}
          </div>
        </div>
        <div @click="affirm" class="sureBtn">确认</div>
      </div>
      <div v-if="chooseTimeStatus" class="date-time-box">
        <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate"
          show-toolbar @confirm="sureDate" @cancel="chooseTimeStatus = false" />
      </div>
    </div>
  </div>
</template>
<script>
import {
  dateFormat,
  getTime,
  getNDateBefore,
  getYearOrMonth
} from "@/utils/dateUtil";
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {
    startDate: {},
    endDate: {},
    dataChooseFlag: {}
  },
  data() {
    return {
      chooseTimeStatus2: false,
      chooseTimeStatus: false,
      // 时间选择值
      currentDate: "",
      startDateShow: "",
      endDateShow: "",
      // 设置时间选择可选取间
      minDate: new Date(2017, 0, 1),
      maxDate: new Date(2021, 11, 31),
      dataIndex: 1
    };
  },
  mounted() {
    this.minDate = new Date(`2021-01-01`);
    this.maxDate = new Date(getNDateBefore(1));
  },
  computed: {
    ...mapGetters(["timeObj"])
  },
  watch: {
    timeObj: {
      handler(newValue, oldValue) {
        this.startDateShow = this.timeObj.startData;
        this.endDateShow = this.timeObj.endData;
      },
      deep: true,
      immediate: true
    },
    dataChooseFlag: {
      handler(newval, oldval) {
        this.chooseTimeStatus2 = newval;
      }
    }
  },
  methods: {
    // 打开时间选择框
    getDate(flag = 1) {
      this.chooseTimeStatus = true;
      this.dataIndex = flag;
      this.$store.commit("SETSHOW", true);
      if (flag === 1) {
        this.minDate = new Date(`2021-01-01`);
        this.maxDate = new Date(getNDateBefore(1));
      } else {
        this.minDate = new Date(this.startDateShow);
      }
    },
    closeX() {
      this.$emit("closeX", false);
    },
    // 时间选择按钮
    sureDate() {
      this.dataIndex === 1
        ? (this.startDateShow = dateFormat(this.currentDate))
        : (this.endDateShow = dateFormat(this.currentDate));
      this.chooseTimeStatus = false;
    },
    // 时间选择确认按钮
    affirm() {
      const start = getTime("2020-10-31");
      const end = getTime("2020-12-31");
      const startNow = getTime(this.startDateShow);
      const endNow = getTime(this.endDateShow);
      if (!this.startDateShow || !this.endDateShow) {
        this.$alertShow("请选择开始时间或结束时间");
      } else if (endNow < startNow) {
        this.$alertShow("开始时间不能大于结束时间");
      } else if (
        this.startDateShow.substring(0, 4) !== this.endDateShow.substring(0, 4)
      ) {
        this.$alertShow("不可跨年查询");
      } else if (
        (startNow >= start && startNow <= end) ||
        (endNow >= start && endNow <= end)
      ) {
        this.$alertShow("该时间范围暂无数据！");
      } else {
        this.$store.commit('SETTIMEACTIVE', '-1');
        this.$store.commit("SETTIMEOBJ", {
          startData: this.startDateShow,
          endData: this.endDateShow
        });
        this.$store.commit("SETSHOW", false);
      }
    }
  }
};
</script>
<style scoped lang="less">
#box {
  font-size: 0.28rem;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  color: #333333;
  font-weight: 400;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);

  .popup {
    height: 100%;
    // border: 1px solid red;
    width: 100%;
    position: relative;

    .select-time-box {
      width: 100%;
      background: #fff;
      position: absolute;
      left: 0;
      bottom: 0;
    }

    .date-time-box {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 99;
      min-height: 40%;
    }
  }

  .theHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;

    .theTitle {
      color: #565656;
      font-size: 0.28rem;
      padding: 0.2rem;
    }
  }

  .theDateCon {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0.3rem;

    .dateSty {
      width: 2.5rem;
      padding: 0.15rem 0;
      background-color: #f3f3f3;
      text-align: center;
      border-radius: 0.08rem;
    }
  }

  .sureBtn {
    width: 95%;
    text-align: center;
    color: #ffffff;
    background: #4570a9;
    margin: 0.6rem auto;
    padding: 0.15rem 0;
    border-radius: 0.08rem;
  }

  .van-overlay {
    z-index: 99999999 !important;
  }

  .van-popup--bottom {
    z-index: 99999999 !important;
  }
}
</style>
